<template>
  <h1>我是App组件</h1>
  <h2>一个人的信息</h2>
  <h3>姓名:{{ person.name }}</h3>
  <h3>年龄:{{ person.age }}</h3>
  <h3>工作种类:{{ person.job.type }}</h3>
  <h3>工作薪水:{{ person.job.salary }}</h3>
  <button @click="changeInfo">修改个人信息</button>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'App',
  setup() {
    // reactive只能作用于对象
    let person = reactive({
      name: '王某',
      age: 18,
      job: {
        type: '前端工程师',
        salary: '30k',
      },
    })

    // 方法
    function changeInfo() {
      person.name = '王总'
      person.age = 23
      person.job.type = 'UI'
      person.job.salary = '60k'
      console.log(person.job)
    }

    // 返回一个对象(常用)
    return {
      person,
      changeInfo,
    }
  },
}
</script>
